<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
		</style>
	
	<script type="text/javascript">
		{
			window.onload=function()
			{
				/* var box1=document.getElementById("box1");
			   var btn01=document.getElementById("btn01");
			   btn01.onclick=function()
			  {
				//获取元素当前显示的样式,如果没有，则获取默认值，只有ie支持  而且没办法修改只读的
				alert(box1.currentStyle.width);  
			  } */
			  
			 /* var box1=document.getElementById("box1");
			  var btn01=document.getElementById("btn01");
			  //getComputedStyle()来获取元素当前的样式是window的方法,需要两个参数 伪元素和样式的元素,返回一个封装样式的对象
			  //没有设置也会获取真实的值,而不是默认值
			   btn01.onclick=function()
			   {
				   //alert(window.getComputedStyle(box1,null).backgroundColor);   //ie8及以下不好使
				   
			   } */
			   
			   var box1=document.getElementById("box1");
			    var btn01=document.getElementById("btn01");
			    btn01.onclick=function()
				{
				
					   var w= getStyle(box1,"width");
					  alert(w);
				}
			 
			   
			   function getStyle(obj,name)
			   {
				  /* return  getComputedStyle(obj,null)[name];        //.后面跟的是常量，如果属性是变量就要加[]  ie8及以上好用  同样是只读的
				  return obj.currentStyle[name];         //ie8及以下好用 */
				  if(window.getComputedStyle)   //判断是否有这个方法  加window避免报错  
				  {
					  return  getComputedStyle(obj,null)[name];
				  }
				  else{
					   return obj.currentStyle[name];    
				  }
				  //return window.getComputedStyle? getComputedStyle(obj,null)[name]: return obj.currentStyle[name];  
				  
			   }
			  
			}
			
		}
	</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<div id="box1"></div>
	</body>
</html>